<meta charset="UTF-8">
<style>
    ul{
        background-color: pink;
    }
    li{
        background-color: skyblue;
        margin: 20px;
    }
    .tip{
        height: 30px;
        width: 200px;
        border-radius: 6px;
        background-color: aqua;
        text-align: center;
        line-height: 30px;
        position: absolute;
        display: none;
        pointer-events:none;
    }
    .tip-bottom{
        position: absolute;
        bottom: -15px;
        left: 50%;
        /* margin-left: -15px; */
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 15px solid aqua;
        
    }
</style>





<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>
<div class="tip">我是ul方法
    <div class="tip-bottom"></div>
</div>

<script>
    //1.1获取ul
    var ulObj = document.querySelector('ul')
    //1.给ul绑定鼠标移动事件
    ulObj.onmousemove = function(evt){
        var e = evt || window.event
        var target = e.target || e.srcElement
        if (target.nodeName == 'LI'){
            var tipObj = document.querySelector('.tip')
            tipObj.style.display = 'block'
            tipObj.style.left = e.clientX - tipObj.clientWidth/2+'px'
            tipObj.style.top =  e.clientY - tipObj.clientHeight/2 -35 +'px'
        }
        ulObj.onmouseout = function() {
            tipObj.style.display = 'none'
        }
    }


</script>